<template>
  <div class="menuBtnContain">

    <el-icon @click="windowRestore();" v-if="maxWindows">
      <el-icon><ZoomOut /></el-icon>
    </el-icon>
    <el-icon @click="windowMax();" v-else>
      <el-icon><FullScreen /></el-icon>
    </el-icon>

    <el-icon class="minIcon" @click="windowMin">
      <Minus/>
    </el-icon>

    <template v-if="pageType==='login'">

      <el-icon class="closeIcon" @click="windowQuit">
        <el-icon><Close /></el-icon>
      </el-icon>
    </template>

    <template v-if="pageType==='mainContent'">

      <el-icon @click="windowClose">
        <el-icon><Close /></el-icon>
      </el-icon>
    </template>


  </div>

</template>

<script setup>
import {windowClose, windowMax, windowMin, windowQuit, windowRestore} from "@/api/appEvent";
import useAppStore from "@/store/modules/appInfos";

const {proxy} = getCurrentInstance();
//父组件传递的参数pageType
const props = defineProps({
  pageType: {
    type: String,
    default: ""
  }
});

const appInfos =useAppStore()

const maxWindows = computed(() => appInfos.mainWindowsMax)

onMounted(() => {
  const ipc =useAppStore().ipc;
  ipc.on("maxWindows", (event, arg) => {
    appInfos.setMainWindowsMax(arg);
  });
});



</script>

<style lang="scss" scoped>

.el-icon {
  -webkit-app-region: no-drag;
}

.menuBtnContain {
  height: 30px;
  text-align: right;
  overflow: hidden;
  padding-right: 5px;
 //阴影
  border-bottom: 1px solid #e3e3e3;


  .el-icon {
    font-size: 20px;
    width: 30px;
    height: 100%;

    &:last-child {
      //margin-right: 5px;
    }

    &:hover {
      //background: #e3e3e3;
      background: rgba(183, 182, 182, 0.5);
      cursor: pointer;
    }
  }

  .fullScreen {
    font-size: 14px;
  }

  .closeIcon {

    &:hover {
      background: rgba(255, 0, 0, 0.8);
      color: white;
    }
  }

  .menuBG {
    width: 100%;
    background: linear-gradient(to right, #212498, #5D238F);

  }
}
</style>
